<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useGetApplyJoinPage } from '@fl/api/mall-api'
import { SearchTable } from '@fl/components'

import Audit from './audit.vue'

const id = ref('')
const visible = ref(false)
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const params = computed(() => ({
    page: tablePage.currentPage,
    size: tablePage.pageSize,
}))
const { data: applyTableData, isLoading: applyJoinLoading } = useGetApplyJoinPage(params)
const records = ref()
watchEffect(() => {
    if (applyTableData.value) {
        records.value = applyTableData.value.records
        tablePage.total = applyTableData.value.total ?? 0
    }
})
const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'accountName', title: '账户名' },
        { field: 'mobile', title: '手机号' },
        { field: 'accountCreateTime', title: '创建时间' },
        { field: 'applyJoinTime', title: '申请时间' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 800,
    keepSource: true,
    showOverflow: true,

})
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
}

function audit(applicationId: string) {
    id.value = applicationId
    visible.value = true
}
</script>

<template>
    <SearchTable v-bind="gridOptions"
                 v-model:pager="tablePage"
                 row-class-name="table-row-style"
                 :loading="applyJoinLoading"
                 :data="records"
                 @page-change="handlePageChange"
    >
        <template #operate="{ row }">
            <span class="cursor-pointer"
                  @click="audit(row.applicationId)"
            >
                审核
            </span>
        </template>
    </SearchTable>

    <Audit :key="id"
           v-model:id="id"
           v-model:visible="visible"
    />
</template>
